<!DOCTYPE html>
<html>
<head>
	<title>照片书编辑内容</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="telephone=no,email=no" name="format-detection">
	 <link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/normalize.css" type="text/css">
	 <link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/photo_edit.css" type="text/css">
	 <script type="text/javascript" src="__ROOT__/Apps/WebApp/View/default/js/jquery-1.7.2.min.js"></script>
   	<script src="__ROOT__/Apps/WebApp/View/default/js/rangeslider.min.js"></script>
	 <script src="__ROOT__/Apps/WebApp/View/default/js/jisuan.js"></script>
	<style type="text/css">
		.am-animation-fade {
			-webkit-animation-name: am-fade;
			animation-name: am-fade;
			-webkit-animation-duration: 0.8s;
			animation-duration: 0.8s;
			-webkit-animation-timing-function: linear;
			animation-timing-function: linear;
		}
		.am-g {
			margin: 0 auto;
			width: 100%;
		}
		/* 提示框 */
		.wst-msg-modal {
			display: none;
			position: fixed;
			bottom: 65px;
			z-index: 9999;
			text-align: center;
		}
		.wst-modal-content {
			display: inline-block;
			max-width: 90%;
			background-color: rgba(0, 0, 0, .7);
			color: white;
			border-radius: 10px;
			padding: 10px;
		}
	.conversion_top_img,.imgback_trim,.Conversion_top_img{
		overflow: hidden;
	}
	.conversion_top_img img,
	.imgback_trim img,
	.Conversion_top_img img
	{
		position: absolute;
		top:-25%;
		left:-25%;
	}
	.img1{
		max-width: 150%;
		height:auto;
	}
	.fixed{
		overflow: hidden;

	}
	.opcity{
		opacity: 1;
		z-index: 5;
	}
	.aa{
		display: none;
	}
	.kaishi{
		display: none;
	}
	.rangeslider{
		width: 100%;
    height: 0.16rem;
    position: relative;
    background: #EEEEEE;
    border-radius: 4px;
    margin-top: 0.5rem;
	}
	.rangeslider__fill{
	background: #63E0CE;
    height: 0.16rem;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
	}
	.rangeslider__handle{
	background: #fff;
    box-shadow: 0 0 5px 0 rgba(128,128,128,0.50);
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    left: 0;
    top: -0.16rem;
    position: absolute;
	}
	.sc{
		position:relative;
	}
		.uploadfile-input{
			position: absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			opacity: 0;
		}
		.am-header{
			position: fixed;
			width: 100%;
			height:100%;

			left:0;
			bottom:0;
			z-index: 999;

		}
		.header_zhao{
			width: 100%;
			height:100%;
			background: #000;
			opacity: .5;
			position: absolute;
			top:0;
			left:0;
			z-index:88;
		}
		.tixing{
			width:200px;
			height:90px;
			background:#fff;
			position: absolute;
			z-index: 99;
			top:50%;
			left:50%;
			margin-left:-100px;
			margin-top:-60px;
			border-radius: 5px;
			overflow: hidden;
		}
		.header_nav{
			width: 100%;
			height:44px;
			line-height: 45px;
			color: #9d9d9d;
			font-size: 0.52rem;
			text-align: center;
			border-bottom:1px solid #9d9d9d;
			float: left;
		}
		.am-header-nav{
			width:99px;
			height:50px;
			line-height:50px;
			text-align: center;
			font-size: 0.48rem;
			color:#63E0CE;
			float: right;
		}
		.am-header-right{
			border-right:1px solid #9d9d9d;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="main">
			<div class="main_top">
				<div class="top_img">
					<volist name="inpage" id="vc" key="k">
						<if condition="$k eq 1">
							<div class="top_container container_cur" page-data="1">
							<else/>
							<div class="top_container" page-data="{$k}">
						</if>
						<div class="container_a"></div>
						<div class="container_b"></div>
						<div class="container_c"></div>
						</div>
					</volist>
				</div>
				<div class="main_top_text">
					<output class="yeshu">1</output>/<span class="zongshu">{$countPage}</span>
				</div>
				<div class="bar">
      			  <input type="range" min="1" max="{$countPage}" data-rangeslider value="1" class="gundong">

					<!-- <div class="barBack"></div>
					<div class="barRadius"></div> -->
				</div>
			</div>
			<div class="main_container">
				<div class="mo_container">
					<div class="moban">
						<div class="moban_main">
							<div class="mobanNav">内页主题风格</div>
							<div class="moStyle">

								<volist name="photoStyle" id="v">
									<if condition="$pbook.style eq $v['pbsId']">
										<div class="styleText left styleColor" data="{$v.pbsId}">{$v.styleName}</div>
										<else/>
										<div class="styleText left" data="{$v.pbsId}">{$v.styleName}</div>
									</if>

								</volist>
							</div>
						</div>
					</div>
					<div class="main_cover none">
						<div class="cover">
							<div class="coverTop">
								<div class="coverNav">选择的封面对封面对编辑将会实时生效哦</div>
								<div class="bookName">
									<span class="book_name left">作品书名</span>
									<input type="text" name="" class="inputName right" placeholder="请输入作品书名" value="{$pbook.bookName}" id="bookName">
								</div>
								<div class="biaoName">
									<span class="biao_name left">副标题</span>
									<input type="text" name="" class="inputbiao right" placeholder="请输入副标题或者作者名字" value="{$pbook.title}" id="title">
								</div>

							</div>
							<div class="coverBot">
								<div class="coverImg">
									<div class="xuanze">选择封面</div>
									<div class="coverStyle">
										<!--<img src="__ROOT__/Apps/WebApp/View/default/images/photo_book_edit_the_cover_upload_photos_btn_nor.png" class="img">-->

										<volist name="photoCover" id="vo">
											<div class="cover_style left">
												<div class="cover_style_img"><img src="__ROOT__/{$vo.image}" class="img">
												</div>
												<if condition="$pbook.coverId eq $vo['id']">
													<div class="cover_style_top cover_cur" data="{$vo.id}">
													<else/>
													<div class="cover_style_top" data="{$vo.id}">
												</if>
													<div class="coverTure">
														<img src="__ROOT__/Apps/WebApp/View/default/images/photo_book_edit_the_cover_selected_cover_icon_sel.png" class="img">
													</div>
												</div>
											</div>
										</volist>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="main_bot none">
						<div class="main_bot_text">
						「编辑操作说明」点击<span class="shangchuan"><img src="__ROOT__/Apps/WebApp/View/default/images/1506666137(1).jpg" class="img"></span>添加新图片，点击上面图中<span class="shangchuan"><img src="__ROOT__/Apps/WebApp/View/default/images/1506665484(1).jpg" class="img"></span>可裁剪或调换位置
						</div>
						<div class="edit">
							<div class="duo" id="reserved">
								<div class="fang left sc">
									<img src="__ROOT__/Apps/WebApp/View/default/images/photo_book_edit_the_content_upload_photos_btn_nor.png" class="img">
									<input type="file" id="uploadImg" class="uploadfile-input" accept="image/*">
								</div>
								<div class="fang left qh" onclick="qh()">
									<input type="hidden" id="hwStatus" value="1">
									<img src="__ROOT__/Apps/WebApp/View/default/images/photo_book_edit_the_content_transposition_btn_nor.png" class="img">
								</div>
								<volist name="reserve" id="vv">
									<div class="fang left" onclick="inBook({$vv.photoId},this)"><img src="__ROOT__/{$vv.img}" class="img"></div>
								</volist>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<div class="footer">
			<div class="footer_main">
				<input type="hidden" id="pbId" value="{$pbook.photoBookId}">
				<div class="footer_true left" onclick="saveCurrent({$pbook.photoBookId})"><span class="true"><img src="__ROOT__/Apps/WebApp/View/default/images/photo_book_edit_the_content_carry_out_icon.png" class="img"></span>完成</div>
				<div class="footer_three left">
					<div class="footer_moban left footer_Color">选择模版</div>
					<div class="footer_cover left">编辑封面</div>
					<div class="footer_edit left">编辑内容</div>
				</div>

			</div>
		</div>
	</div>
	<div class="am-g wst-msg-modal" id="wst-msg-modal">
		<div class="wst-modal-content" id="wst-modal-content"></div>
	</div>
	<div class="wst-to-top" id="toTop">
		<i class="am-icon-arrow-up wst-to-top-icon"></i>
	</div>
	<div style="width: 100%;height: 100px;display: block">

		<header data-am-widget="header" class="am-header am-header-default am-header-fixed wst-inner-page-nav" id="clip" style="display:none;">
			<div class="header_zhao"></div>
			<div class="tixing">
				<div class="header_nav">是否上传图片</div>
				<div class="am-header-left am-header-nav" onclick="closeUploadArea();" style="color:#9d9d9d;">关闭</div>
				<div class="am-header-right am-header-nav" id="clipBtn">上传</div>
			</div>
		</header>

		<div class="am-form-group am-form-file">
			<!--<button type="button" class="am-btn am-btn-danger am-btn-sm addImg" id="addImg"><i class="am-icon-cloud-upload"></i></button>-->
			<!--<input type="file" id="uploadImg" class="uploadfile-input" accept="image/*">-->
			<div id="complainsImg" class="complains-img-area"></div>
			<div style="clear:both;"></div>
		</div>

		<div class="upload-modal" id="upload_modal">
			<div id="clipArea" class="clipArea"></div>
			<input type="hidden" id="imgData" autocomplete="off">
		</div>

		<div class="am-modal am-modal-loading am-modal-no-btn none" tabindex="-1" id="wst-default-loading">
			<div class="am-modal-dialog">
				<div class="am-modal-hd">Loading...</div>
				<div class="am-modal-bd">
					<span class="am-icon-spinner am-icon-spin"></span>
				</div>
			</div>
		</div>

	</div>

	<script src="__ROOT__/Apps/WebApp/View/default/Photoclip/iscroll-zoom.js"></script>
	<script src="__ROOT__/Apps/WebApp/View/default/Photoclip/hammer.js"></script>
	<script src="__ROOT__/Apps/WebApp/View/default/Photoclip/jquery.photoClip.js"></script>
   <script>
	   $("#clipArea").photoClip({
		   width: 350,
		   height: 350,
		   file: "#uploadImg",
		   view: "#view",
		   ok: "#clipBtn",
		   loadStart: function() {
			   $("#wst-default-loading").modal();
		   },
		   loadComplete: function() {
			   $('#clipArea .photo-clip-mask').remove();//不需要截图，因此移除
			   $("#wst-default-loading").modal('close');
		   },
		   clipFinish: function(dataURL) {
			   var imgData = $('#clipArea .photo-clip-view').find('img').attr('src');
			   if(!imgData || imgData==''){
				   wstMsg('请先选择图片');
				   return false;
			   }
			   $("#wst-default-loading").modal();
			   $.post(Think.U('WebApp/PhotoBooks/addPhoto'), {'imgData': imgData}, function(data){
					if(data.status==1){
						var pbId=$('#pbId').val();
						$.post(Think.U('WebApp/PhotoBooks/addPhotoToBook'),{photoUrl:data.filepath,pbId:pbId}, function(json){
//							alert(JSON.stringify(json))
							if(json.code==1){
								var str='';
								str+='<div class="fang left" onclick="inBook('+json.photoId+',this)"><img src="'+WST.ROOT+'/'+data.filepath+'" class="img"></div>';
								$('#reserved').append(str)
							}
						});

					}


				   $("#wst-default-loading").modal('close');
				   closeUploadArea();
			   });
		   }
	   });
	   $('#uploadImg').on('change', function() {
		   $('.not-upload').hide();
		   $('#clip').show();
		   $('#upload_modal').show();
	   });
	   //关闭图片上传区
	   function closeUploadArea(){
//		$('.not-upload').show();
		   $('.hy').hide();
		   $('#clip').hide();
		   //清空图片上传区的内容
		   $('#clipArea').find('img').remove();
		   $('#file').val('');
		   $('#view').css('background-image','');
		   $('#imgData').val('');
		   $('.shangText').show();
	   }

        var $document   = $(document);
        var selector    = '[data-rangeslider]';
        var $inputRange = $(selector);

        // Example functionality to demonstrate a value feedback
        // and change the output's value.
        function valueOutput(element) {
            var value = element.value;
            var output = element.parentNode.getElementsByTagName('output')[0];

           var output = $('.yeshu').text(value);
        }

        // Initial value output
        for (var i = $inputRange.length - 1; i >= 0; i--) {
            valueOutput($inputRange[i]);
        };

        // Update value output
        $document.on('input', selector, function(e) {
            valueOutput(e.target);
        });

        // Initialize the elements
        $inputRange.rangeslider({
            polyfill: false
        });

        // Example functionality to demonstrate programmatic value changes
        $document.on('click', '#js-example-change-value button', function(e) {
            var $inputRange = $('input[type="range"]', e.target.parentNode);
            var value = $('input[type="number"]', e.target.parentNode)[0].value;

            $inputRange
                .val(value)
                .change();
        });

        // Example functionality to demonstrate programmatic attribute changes
        $document.on('click', '#js-example-change-attributes button', function(e) {
            var $inputRange = $('input[type="range"]', e.target.parentNode);
            var attributes = {
                min: $('input[name="min"]', e.target.parentNode)[0].value,
                max: $('input[name="max"]', e.target.parentNode)[0].value,
                step: $('input[name="step"]', e.target.parentNode)[0].value
            };

            $inputRange
                .attr(attributes)
                .rangeslider('update', true);
        });

        // Example functionality to demonstrate destroy functionality
        $document
            .on('click', '#js-example-destroy button[data-behaviour="destroy"]', function(e) {
                $('input[type="range"]', e.target.parentNode).rangeslider('destroy');
            })
            .on('click', '#js-example-destroy button[data-behaviour="initialize"]', function(e) {
                $('input[type="range"]', e.target.parentNode).rangeslider({ polyfill: false });
            });


</script>

<script type="text/javascript" src="__ROOT__/Apps/WebApp/View/default/js/photo_edit.js"></script>
	<script type="text/javascript" src="__ROOT__/Apps/WebApp/View/default/js/photo_move.js"></script>
	<include file="./Apps/WebApp/View/default/common_js.html" />
</body>


</html>